<template>
  <div class="first">
    <div class="imgs">
      <img src="https://www.nu1l.com/images/logo.png" alt="" />
      <form>
        <button @click="back">后台</button>
      </form>
    </div>
    <video src="https://www.nu1l.com/images/bg.mp4" style="
          width: 1530px;
          height: 870px;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -100;
        " autoplay="autoplay" muted="muted"></video>
    <div class="text">
      Nu1L
      Team是国内顶尖CTF联合战队，成立于2015年，队名源于英文单词“NULL”，《从0到1：CTFer成长之路》、《内网渗透体系建设》作者团队，目前成员90余人，队员分布于清华大学、北京大学、上海科技大学、中科院信工所、山东大学、中国矿业大学、成都信息工程大学、山东科技大学、南京邮电大学、西北大学、乔治亚理工学院等国内外各大高校，也分布于阿里、腾讯、华为、寻臻科技、京东、安恒、长亭、启明星辰、蚂蚁金服等国内安全大厂。
      <br />
      Nu1L
      Team的成员都对信息安全以及CTF比赛有着浓厚的兴趣，拿获了2018年首届网鼎杯亚军、2019年护网杯冠军、2020年全国工业互联网安全技术技能大赛冠军、2022年第三届网鼎杯网络安全大赛冠军等众多国家级赛事冠亚军，于2021年闯入DEFCON
      CTF决赛并获得全球第七名，除了收获国内外各类CTF比赛优异成绩之外，Nu1L
      Team还是N1CTF以及空指针挑战赛发起者，同时也是成都“巅峰极客”决赛“广诚市”三年场景设计者。成员中既有参加Pwn2own、Geekpwn、天府杯的安全研究员，也有HITCON、KCON、Blackhat、天府杯等国内外安全会议演讲者。
    </div>
  </div>
  <div class="second">
    <div class="pro">
      <h2>战绩</h2>
      <br />
      <br />
      <p>
        未来 敬请期待
        <br />
        2024 阿里云CTF 冠军 红明谷线上线下 冠军
        <br />
        2023 第三届网鼎杯网络安全大赛 冠军 中华武数杯全国网络攻防精英赛 冠军
        SCTF 2023 冠军 红明谷决赛 冠军 第七届XCTF总决赛 冠军
        <br />
        2022 深育杯决赛 冠军 西湖论剑网络安全技能大赛 冠军 红明谷线上线下 冠军
        D3CTF2022 冠军 PWNHUB春季赛 冠军 第五空间决赛CTF 冠军
      </p>
    </div>
  </div>
  <div class="third">
    <div class="body">
      <ul>
        <li>
          <div class="pic">
            <img src="https://www.nu1l.com/images/user/ven.jpg" width="100" height="100">
          </div>
          <div class="text">
            <h2>成员</h2>
            <p>founder</p>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="https://www.nu1l.com/images/user/mar.jpg" width="100" height="100" >
          </div>
          <div class="text">
            <h2>成员</h2>
            <p>founder</p>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="https://www.nu1l.com/images/user/mz.jpg" width="100" height="100">
          </div>
          <div class="text">
            <h2>成员</h2>
            <p>founder</p>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="https://www.nu1l.com/images/user/Q7.png" width="100" height="100">
          </div>
          <div class="text">
            <h2>成员</h2>
            <p>founder</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter();
function back(){
  router.push("/login");
}
</script>

<style scoped lang="scss">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    div {
      width: 1520px;
      height: 870px;
      display: block;
      background-repeat: no-repeat;
    }

    .first {
      background-color: rgba(0, 0, 255, 0);

      /* .fullscreenvideo {
                margin-top: 0;
                width: 1530px;
                height: 870px;
                position: absolute;
                top: 100%;
                left: 50%;
                min-width: 100%;
                min-height: 100%;


                -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                -webkit-transition: 1s opacity;
                transition: 1s opacity;
            }

            .videocontainer {
                position: sticky;
                width: 1530px;
                height: 870px;
                z-index: -100;
            } */

      .imgs {
        display: flex;
        width: 100%;
        height: 76px;
        margin-left: 10px;
        position: static;
        justify-content: space-between;

        button {
          width: 70px;
          height: 30px;
          background-color: rgba(255, 192, 203, 0);
          margin-left: 900px;
          color: white;
        }
      }

      .text {
        font-family: 楷体;
        padding-top: 300px;
        display: flex;
        margin: auto 0;
        width: 800px;
        height: 590px;
        background-color: rgba(255, 192, 203, 0);
        margin: 50px auto;
        color: white;
        position: sticky;
        text-align: center;
        line-height: 28px;
        font-size: 18px;
      }
    }

    .second {
      background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.4e02aa6030b0c7fd1b17d6588db6c73d?rik=uYBOFMn%2fUJVCqw&riu=http%3a%2f%2fimg.netbian.com%2ffile%2f2017%2f0316%2f6848afd05b9b22ec0431f065f2080042.jpg&ehk=GSfKx%2fxm195gEJcr21IingFU6ey6cdoEUCDOOXWMfZA%3d&risl=&pid=ImgRaw&r=0');

      .pro {
        width: 500px;
        height: 500px;
        background-color: rgba(255, 192, 203, 0);
        margin: 0 auto;
        color: aliceblue;
        justify-content: center;
        align-content: center;
        align-items: center;
      }
    }

    .third {
      background-image: url('https://bpic.588ku.com/back_water_img/19/09/12/14b6abf497738fb21941c9244197ebf2cf.jpg');
      background-size: cover;
      position: absolute;
      margin-top: 0;
      margin-bottom: 0;
    }


    .body li {
      list-style: none;

      display: flex;
      /* 图片与文字并行 */
      height: 90px;
      width: 500px;
      background-color: #ffffff00;
    }

    .body {
      width: 1200px;
      height: 418px;
      margin: 50px auto;
      /* 版心居中 */
      border-radius: 10px;


    }

    .body ul {

      height: 418px;
      padding: 90px 40px 90px 60px;
      background-color: rgba(255, 192, 203, 0);
      display: flex;
      flex-wrap: wrap;
      /* 弹性盒子换行 */
      justify-content: space-between;
      /* li之间有间距 */
      align-content: space-between;
      /* 行之间有间距 */
    }

    .pic {

      display: flex;

    }

    .body .pic {
      margin-right: 15px;

    }

    .body .text h2 {
      font-size: 20px;
      line-height: 40px;
      font-weight: 400;
      color: #000000;
      align-items: center;
    }

    .body .text p {
      font-size: 14px;
      color: #000000;
      align-items: center;

    }

    img {
      border-radius: 50%;
    }
</style>
